import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  MessageOutlined,
  UserOutlined,
  HomeOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme, ConfigProvider, Avatar,Typography} from 'antd';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const { Header, Sider, Content,Footer} = Layout;
const { Title,Text } = Typography;

const Personalpage = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const [collapsed, setCollapsed] = useState(false);

    //content部分的页面跳转
    const Works = () => {
        return <h2>作品</h2>
    }
    const Like = () => {
        return <h2>点赞</h2>
    }
    const Collect = () => {
        return <h2>收藏</h2>
    }
    const routes = [
        {
          path: '/works',
          exact: true,
          component: Works
        },
        {
          path: '/like',
          component: Like
        },
        {
          path: '/collect',
          component: Collect
        },
    ];
    

    // 更改页面
    const [value,setvalue] = useState('')
    const handleSider = (e)=>{
        setvalue(e.key)
    }
    return (
        // 主题颜色
        <ConfigProvider
        theme={{
            token: {
                // Seed Token，影响范围大
                colorPrimary: '#73d13d',
                borderRadius: 20,
                // 派生变量，影响范围小
                colorBgContainer: '#f6ffed',
            },
        }}
        >
            <Layout>
                <Sider
                    style={{
                        borderRadius:20,
                        background:'#95de64',
                        marginRight:33,
                        width:500
                    }} trigger={null} collapsible collapsed={collapsed}>
                    {/* 导航栏 */}
                    <Menu
                        style={{
                        background:'#d9f7be',
                        borderRadius:20,
                        minHeight:'98vh'
                        }}
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        onClick={handleSider}
                        selectedKeys={[value]}
                        items={[
                            {
                                key: '1',
                                icon: <HomeOutlined />,
                                label: '首页',
                            },
                            {
                                key: '2',
                                icon: <VideoCameraOutlined />,
                                label: '发布',
                            },
                            {
                                key: '3',
                                icon: <MessageOutlined />,
                                label: '私信',
                            },
                            {
                                key:'4',
                                icon: <UserOutlined />,
                                label:'个人'
                            }
                        ]}
                    />
                </Sider>

                {/* Header头部 */}
                <Layout>
                    <Header style={{
                            padding: 0, 
                            background: colorBgContainer,
                            margin:10,
                            height:150,
                            borderRadius:30,
                            display:'flex' ,
                            }}>
                        {/* 导航收起按钮 */}
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                            fontSize: '16px',
                            width: 33,
                            height: 33,
                            margin:'10px'
                            }}
                        />
                        {/* 用户 */}
                        <Avatar style={{
                            margin:'10px',
                            width: 55,
                            height: 55,
                        }} size='large' icon={<UserOutlined />}/>  
                        <div>
                            <Title level={4} style={{ marginBottom: 0 }}>用户名</Title>
                            <Text style={{ marginBottom: 0 }}>个人宣言</Text>
                            <Text style={{ marginBottom: 0 }}>账号id</Text>
                        </div>
                        <Button style={{ marginLeft: 'auto', marginRight: 10 }}>关注</Button>
                        <Button style={{ marginRight: 10 }}>粉丝</Button>
                        <Button>退出登录</Button>
                    </Header>
                    {/* 内容部分 */}
                    <Content
                        style={{
                            margin: '20px 16px',
                            padding: 24,
                            minHeight:'71vh',
                            background:colorBgContainer,
                            borderRadius:20,
                            maxHeight:'71vh',
                            overflow:'auto',
                        }}
                    >
                        <Router>
                            <nav>
                                <ul>
                                    <Button style={{marginRight: 30}}>
                                        <Link to='/works' >作品</Link>
                                    </Button>
                                    <Button style={{marginRight:'auto'}}>
                                        <Link to='/like' >点赞</Link>
                                    </Button>
                                    <Button style={{marginLeft: 30}}> 
                                        <Link to='/collect'>收藏</Link>
                                    </Button>
                                </ul>
                            </nav>
                            <Switch>
                                {routes.map((route, index) => (
                                    <Route
                                        key={index}
                                        path={route.path}
                                        exact={route.exact}
                                        component={route.component}
                                    />
                                ))}
                            </Switch>
                        </Router>
                    </Content>
                    <Footer style={{ textAlign: 'center', height:50 }}>
                        轻学网
                    </Footer>
                </Layout>
            </Layout>
        </ConfigProvider>
    );

};

export default Personalpage